<template>
  <div class="index">
    <e-head></e-head>
    <div class="content">
      <div class="carousel-box">
        <Carousel autoplay loop trigger="hover">
          <CarouselItem v-for="item in slideshows" :key="item.id">
            <div class="slideshow-item" @click="slideshowClick(item)">
              <img :src="item.img_url" alt="" />
            </div>
          </CarouselItem>
        </Carousel>
      </div>
      <section class="product-box">
        <h2>{{ $t("lang.product") }}</h2>
        <div class="product-list">
          <ul>
            <li
              v-for="(item, index) in products"
              :key="index"
              @click="productClick(index)"
            >
              <div class="product-item">
                <img :src="item.imgs[0]" alt="" />
                <span>{{ item.name }}</span>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <section class="successful-case-box">
        <h2>{{ $t("lang.successfulCase") }}</h2>
        <div class="successful-case-list">
          <Carousel loop>
            <CarouselItem
              v-for="(item, index) in successfulCase.length % 4 > 0
                ? parseInt(successfulCase.length / 4) + 1
                : parseInt(successfulCase.length / 4)"
              :key="index"
            >
              <div class="successful-case-item">
                <div
                  v-for="(item2, index2) in successfulCase.slice(
                    index * 4,
                    index * 4 + 4
                  )"
                  :key="index2"
                  class="successful-case-item_"
                  @click="caseClick(item2, index * 4 + index2)"
                >
                  <img :src="item2.img" alt="" />
                  <span>{{ item2.name }}</span>
                </div>
              </div>
            </CarouselItem>
          </Carousel>
        </div>
      </section>
      <section class="news-box">
        <h2>{{ $t("lang.news") }}</h2>
        <div class="news-content">
          <img :src="require('@/assets/20211015225028.jpg')" alt="" />
          <ul class="news-list">
            <li
              class="news-list-li"
              v-for="(item, index) in news"
              :key="index"
              @click="newsClick(item)"
            >
              <a>{{ item.title }}</a
              ><span>{{ item.create_time }}</span>
            </li>
            <div class="page-box"></div>
          </ul>
        </div>
      </section>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import store from "@/store";
import { mapGetters } from "vuex";
export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters([
      "solutions",
      "successfulCase",
      "pAttributes",
      "slideshows",
      "products",
      "news",
    ]),
  },
  watch: {
    solutions: {
      handler: function (newValue) {
        this.mySolutions = newValue;
      },
    },
    successfulCase: {
      handler: function (newValue) {
        this.mySuccessfulCase = newValue;
      },
    },
    pAttributes: {
      handler: function (newValue) {
        this.myPAttributes = newValue;
      },
    },
    slideshows: {
      handler: function (newValue) {
        this.mySlideshows = newValue;
      },
    },
    products: {
      handler: function (newValue) {
        this.myProducts = newValue;
      },
    },
    news: {
      handler: function (newValue) {
        this.myNews = newValue;
      },
    },
  },
  created() {
    store.dispatch("fetchSlideshow");
    store.dispatch("fetchProducts");
    store.dispatch("fetchNews");
  },

  methods: {
    slideshowClick(e) {
      if (e.url) {
        window.open(e.url);
      }
    },
    productClick(e) {
      let current = null;
      this.pAttributes.forEach((item, index) => {
        if (item.id == this.products[e].type_id) {
          current = index;
        }
      });
      localStorage.setItem(
        "product_attribute",
        JSON.stringify({
          current: current,
          data: this.pAttributes,
        })
      );
      localStorage.setItem("product", JSON.stringify(this.products[e]));
      this.$router.push("/product/detail/" + this.products[e].id);
    },
    caseClick(e, i) {
      localStorage.setItem(
        "successful-case",
        JSON.stringify({
          current: i,
          data: this.successfulCase,
        })
      );
      this.$router.push("/successful-case/detail/" + e.id);
    },
    newsClick(e) {
      localStorage.setItem("news", JSON.stringify(e));
      this.$router.push("/news/detail/" + e.id);
    },
  },
};
</script>
<style lang="scss">
.index {
  ul {
    list-style: none;
  }

  .content {
    .carousel-box {
      .ivu-carousel-list {
        width: 100%;
        .slideshow-item {
          &:hover {
            cursor: pointer;
          }
          img {
            width: 100%;
          }
        }
      }
    }
    .product-box,
    .successful-case-box,
    .news-box {
      max-width: 1300px;
      margin: 0 auto;
    }
    .product-box {
      .product-list {
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: 300px;
            height: 300px;
            position: relative;
            transition: all 0.8s;
            overflow: hidden;
            padding: 10px 0;
            &:hover {
              cursor: pointer;
            }

            .product-item {
              width: 100%;
              height: 100%;
              position: relative;
              border: 1px dashed #d6d6d6;
              &:hover span {
                transition: all 0.5s;
                height: 45px;
              }
              img {
                width: 100%;
                height: 100%;
              }
              span {
                width: 100%;
                height: 0px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-align: center;
                background: #000;
                opacity: 0.5;
                position: absolute;
                bottom: 0px;
                left: 0px;
                color: #fff;
                z-index: 999;
                transition: all 0.5s;
              }
            }
          }
        }
      }
    }

    .successful-case-box {
      .successful-case-list {
        .successful-case-item {
          width: 300px;
          height: 300px;
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        & img {
          display: inline-block;
          width: 300px;
          height: 300px;
        }

        .successful-case-item_ {
          position: relative;
          &:hover span {
            height: 25px;
          }
          span {
            width: 100%;
            height: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-align: center;
            background: #000;
            opacity: 0.5;
            position: absolute;
            bottom: 0px;
            left: 0px;
            color: #fff;
            z-index: 999;
            transition: all 0.5s;
          }
        }
      }
    }
    .news-box {
      max-width: 1300px;
      margin: 10px auto 0 auto;
      .news-content {
        display: flex;

        .news-list {
          width: 100%;
          padding: 0 15px;

          .news-list-li {
            height: 45px;
            line-height: 45px;
            border-bottom: 1px dashed #ddd;
            display: flex;
            justify-content: space-between;
            a {
              display: inline-block;
              &:hover {
                text-decoration: underline;
              }
            }
            span {
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>